<template>
  <div class="AlbumDetails test-1">
    <div class="AlbumDetails-one">
      <div class="one-kuan-one">
        <img :src="AlbumDetailsOne.blurPicUrl" alt="" />
      </div>
      <div class="one-kuan-two">
        <div class="text-one">
          {{ AlbumDetailsOne.name }}&nbsp;<span
            v-if="AlbumDetailsOne.alias.length !== 0"
            >(&nbsp;{{ alias }}&nbsp;)</span
          >
        </div>
        <!-- <div class="text-two">用户</div> -->
        <div class="text-three">
          <button class="atrive-one" @click="quanbu(AlbumDetailsTwo)">
            播放全部&nbsp;&nbsp;<van-icon name="plus" />
          </button>
          <button class="atrive-two" @click="Collection(AlbumDetailsOne)">
            {{text}}
          </button>
        </div>
        <div class="text-four">
          <div class="four-text">歌手：</div>
          <div class="four-geshou">
            <div
              class="geshouming"
              v-for="(item, index) in geshouming"
              :key="index"
              @click="SingerDetailsPage(item.id)"
            >
              <div class="geshouming-kuan">{{ item.name }}</div>
            </div>
            <div class="clear"></div>
          </div>
          <div class="clear"></div>
        </div>
        <div class="text-five">时间：&nbsp;{{ DataOne }}</div>
      </div>
    </div>
    <div class="AlbumDetails-two">
      <van-tabs v-model="active">
        <van-tab title="歌曲列表" class="Page-two">
          <Jie></Jie><AD :AD="AlbumDetailsTwo"></AD>
        </van-tab>
        <van-tab title="专辑详情" class="Page-two">
          <div class="page12">
            <div class="page12-one">专辑介绍</div>
            <div class="page12-two">
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ page12Two }}
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import Jie from "../components/Jie.vue";
import AD from "../components/AD.vue";
export default {
  name: "AlbumDetails",
  data() {
    return {
      id: "",
      active: 0,
      alias: "",
      DataOne: "",
      page12Two: "",
      text: "收藏",
      geshouming: [],
      AlbumDetailsOne: [],
      AlbumDetailsTwo: [],
    };
  },
  components: {
    Jie,
    AD,
  },
  created() {
    this.id = this.$route.params.id;
    // console.log("this.id==>", this.id);
    this.AlbumDetailsqingqiu();
    this.Collectiontext(this.id);
  },
  methods: {
    quanbu(e) {
      this.$store.state.zon = [];
      for (let i = 0; i < e.length; i++) {
        this.axios({
          method: "get",
          url: "/song/detail?ids=" + e[i].id,
        })
          .then((result) => {
            // console.log("result==>", result.data.songs);
            // this.like = result.data.songs;
            this.$store.commit("update", { data: result.data.songs[0] });
          })
          .catch((err) => {
            console.log("err==>", err);
          });
      }
      this.$store.commit("updateTwo", { data: e[0].id });
      this.axios({
        method: "get",
        url: "/song/url?id=" + e[0].id,
      })
        .then((result) => {
          // console.log("result==>", result.data.data[0].url);
          this.$store.commit("updateOne", { data: result.data.data[0].url });
          this.$store.commit("updateL", { data: e[0].name });
          this.$store.commit("updateI", { data:e[0].al.picUrl  });
        })
        .catch((err) => {
          console.log("err==>", err);
        });
      this.axios({
        method: "get",
        url: "/lyric?id=" + e[0].id,
      })
        .then((result) => {
          // console.log("result==>", result.data.lrc.lyric);
          this.$store.commit("updateLyric", { data: result.data.lrc.lyric });
        })
        .catch((err) => {
          console.log("err==>", err);
        });
    },
    Collectiontext(id) {
      let shuzu = JSON.parse(JSON.stringify(this.$store.state.collectionZhuanji));
      // console.log("shuzu==>", shuzu);
      if (shuzu.length > 0) {
        for (let index = 0; index < shuzu.length; index++) {
          if (id == shuzu[index].id) {
            // console.log("id==>", id);
            // console.log(" shuzu[index].id==>", shuzu[index].id);
            this.text = this.$store.state.collectionGedanTextTwo;
            // return this.text;
            // console.log("this.text==>", this.text);
            break;
          }
        }
      }
      console.log("this.text==>", this.text);
    },
    Collection(e) {
      if (this.$store.state.ifEavr) {
        let shuzu = JSON.parse(
          JSON.stringify(this.$store.state.collectionZhuanji)
        );
        if (shuzu.length == 0) {
          this.$store.state.collectionZhuanji.push(e);
          Toast("收藏成功！！！");
          this.text = this.$store.state.collectionGedanTextTwo;
        }
        if (shuzu.length > 0) {
          for (let index = 0; index < shuzu.length; index++) {
            if (e.id == shuzu[index].id) {
              shuzu.splice(index, 1);
              this.$store.state.collectionZhuanji = shuzu;
              Toast("取消成功！！！");
              this.text = this.$store.state.collectionGedanTextOne;
              return;
            }
          }
          this.$store.state.collectionZhuanji.push(e);
          Toast("收藏成功！！！");
          this.text = this.$store.state.collectionGedanTextTwo;
        }
      } else {
        Toast("请登录！！！");
      }
    },
    SingerDetailsPage(id) {
      // console.log('id==>',id);
      this.$router.push({ name: "SingerDetailsPage", params: { id } });
    },
    AlbumDetailsqingqiu() {
      this.axios({
        method: "get",
        url: "/album?id=" + this.id,
      })
        .then((result) => {
          // console.log("result=0=>", result.data.album);
          // console.log("result=1=>", result.data.songs);
          this.AlbumDetailsOne = result.data.album;
          this.alias = result.data.album.alias[0];
          this.geshouming = result.data.album.artists;
          this.page12Two = result.data.album.description;
          let date = result.data.album.publishTime;
          date = new Date(date);
          let year = date.getFullYear(); // 年
          let month = date.getMonth() + 1; // 月, 月份是从0开始算的 0 - 11
          let data = date.getDate(); // 日

          let hour = date.getHours(); // 时
          let minute = date.getMinutes(); // 分
          let second = date.getSeconds(); // 秒
          // 优化一下，一般在显示 月 日 时分秒的时候我们习惯按照两位的方式去显示；如果数字是一位的我们补齐一个0即可
          month = month < 10 ? "0" + month : month;
          date = date < 10 ? "0" + date : date;
          hour = hour < 10 ? "0" + hour : hour;
          minute = minute < 10 ? "0" + minute : minute;
          second = second < 10 ? "0" + second : second;
          let munder = year + " - " + month + " - " + data;
          this.DataOne = munder;
          this.AlbumDetailsTwo = result.data.songs;
        })
        .catch((err) => {
          console.log("err==>", err);
        });
    },
  },
};
</script>

<style lang="less" scoped>
::v-deep .van-tabs--line .van-tabs__wrap {
  width: 100%;
  height: 30px;
}
::v-deep .van-tab__pane,
.van-tab__pane-wrapper {
  box-sizing: content-box;
}
.test-1::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.test-1::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  // border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #b3b3b3;
}
.test-1::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  // border-radius: 10px;
  background: #ededed;
}
.AlbumDetails {
  width: 100%;
  height: 500px;
  background-color: white;
  overflow-y: scroll;
}
.AlbumDetails-one {
  width: calc(100% - 40px);
  height: 180px;
  padding: 20px 20px;
  .one-kuan-one {
    float: left;
    width: 180px;
    height: 180px;
    img {
      width: 100%;
      height: 100%;
      border-radius: 10px;
    }
  }
  .one-kuan-two {
    float: left;
    width: calc(73% - 20px);
    height: 180px;
    padding-left: 20px;
    font-size: 11px;
    color: rgb(63, 63, 63);
    .text-one {
      width: 100%;
      height: 30px;
      font-size: 17px;
      line-height: 30px;
      span {
        color: #858585;
        font-size: 15px;
      }
    }
    .text-two {
      width: 100%;
      height: 35px;
      line-height: 35px;
    }
    .text-three {
      width: 100%;
      height: 50px;
      button {
        width: 100px;
        height: 30px;
        border: 0;
        border-radius: 20px;
        margin-right: 10px;
        margin-top: 10px;
      }
      .atrive-one {
        color: rgb(255, 255, 255);
        background-color: rgb(245, 112, 112);
        cursor: pointer;
      }
      .atrive-one:hover {
        background-color: rgb(233, 106, 106);
      }
      .atrive-two {
        border: 1px solid rgb(36, 36, 36);
        background-color: rgb(255, 255, 255);
        cursor: pointer;
      }
      .atrive-two:hover {
        background-color: rgb(236, 236, 236);
      }
    }
    .text-four {
      width: 100%;
      // height: 25px;
      line-height: 25px;
      .four-text {
        float: left;
        width: 35px;
        height: 25px;
      }
      .four-geshou {
        float: right;
        width: calc(92% - 20px);
        padding: 0 10px;
        .geshouming {
          float: left;
          width: calc(20% - 5px);
          height: calc(25px - 5px);
          padding: 2.5px;
          .geshouming-kuan {
            font-size: 9px;
            width: 100%;
            height: 20px;
            text-align: center;
            line-height: 20px;
            border-radius: 10px;
            cursor: pointer;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            background-color: rgb(241, 241, 241);
          }
          .geshouming-kuan:hover {
            background-color: rgb(234, 234, 234);
          }
        }
      }
    }
    .text-five {
      width: 100%;
      height: 25px;
      line-height: 25px;
    }
  }
}
.AlbumDetails-two {
  height: 100%;
  .Page-two {
    width: calc(100% - 0px);
    height: calc(100% - 40px);
    padding: 20px 0;
  }
  .page12 {
    width: calc(100% - 40px);
    height: 100%;
    padding: 0 20px;
    .page12-one {
      width: 100%;
      height: 30px;
      font-size: 17px;
      line-height: 30px;
    }
    .page12-two {
      width: 100%;
      height: 100%;
      font-size: 12px;
      color: rgb(107, 107, 107);
      line-height: 19px;
    }
  }
}
.clear {
  clear: both;
  width: 100%;
  height: 1px;
}
</style>